<template>
    <document>
        <h1>MCheckbox / 复选框</h1>

        <h2>Summary</h2>
        <h6>概述</h6>

        在一组备选项中进行多选
        <hr>
        A group of options for multiple choices.

        <h2>Example</h2>
        <h6>效果演示</h6>

        <div class="panel">
            Well...Just try to select something.
            <br>
            <br>
            <m-group name="checkbox" v-on:change="value_is_change">
                <m-checkbox value="A">A</m-checkbox>
                <m-checkbox value="B">B</m-checkbox>
                <m-checkbox value="C">C</m-checkbox>
                <m-checkbox value="D">D</m-checkbox>
            </m-group>
            <div id="response">
                <m-button @click.native="showresult">CLICK ME</m-button>
                {{result}}
            </div>
        </div>

        <!--<m-radio name="test" value="test">test</m-radio>-->

        <h2>Usage</h2>
        <h6>使用方法</h6>

<codeblock>
    &lt;m-group name="checkbox" v-on:change="value_is_change"&gt;
        &lt;m-checkbox value="A"&gt;A&lt;/m-checkbox&gt;
        &lt;m-checkbox value="B"&gt;B&lt;/m-checkbox&gt;
        &lt;m-checkbox value="C"&gt;C&lt;/m-checkbox&gt;
        &lt;m-checkbox value="D"&gt;D&lt;/m-checkbox&gt;
    &lt;/m-group&gt;
</codeblock>
<codeblock>
    new Vue({
        ...
        methods:{
            value_is_change:function(val){
                console.log("Your choose is :"+val);
            }
        }
    })
</codeblock>

        <h2>Props</h2>
        <h6>组件属性</h6>

        <table>
            <tr>
                <th>Names</th>
                <th>Meaning</th>
                <th>Value</th>
                <th>Note</th>
            </tr>
            <tr>
                <td>value</td>
                <td>
                    选项值<br>
                    The value of options
                </td>
                <td>
                    String | Number
                </td>
                <td></td>
            </tr>
        </table>

        <h2>Functions</h2>
        <h6>相关函数</h6>

        <function>
            <h1>Vue.mirror.get(name)</h1>
            <p>获取单选按钮组的选择值</p>
            <p>Get the value of the MRadio group's selection.</p>
            <table>
                <tr>
                    <td>
                        name
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        模态窗唯一名<br>
                        The unique name for the Modal
                    </td>
                </tr>
            </table>
        </function>

        <h2>Events</h2>
        <h6>事件</h6>

        <function>
            <h1>change(val)</h1>
            <p>当选择值改变时触发该事件</p>
            <p>Trigger when selection is changed</p>
            <table>
                <tr>
                    <td>
                        val
                    </td>
                    <td>
                        String | Number
                    </td>
                    <td>
                        改变后的值<br>
                        The value of the selection
                    </td>
                </tr>
            </table>
        </function>

        <h2>Notice</h2>
        <h6>注意</h6>

        TODO

    </document>
</template>

<style lang="less">
    @import "~core/basic.less";

    .panel {
        padding: 3*@gird;
        box-shadow: @shadow-1;
    }

    #response {
        margin-top: 24px;
        color: @danger;
    }

    .MCheckbox {
        margin-right: 24px;
    }
    
</style>

<script>
    export default {
        data(){
            return {
                result:''
            }
        },
        methods:{
            value_is_change(val){
                this.result = `Your choise is '${this.mirror.get("checkbox").toString()}'`;
            },
            showresult(){
                this.mirror.toast(`Your choise is '${this.mirror.get("checkbox").toString()}'`,0,"sub");
            }
        }
    }
</script>